import React, { useRef, useState } from "react";

import styles from "./style.module.scss";

import { ReactComponent as IconFinished } from "assets/icons/TODO_FINISHED.svg";
import { ReactComponent as IconNotFinished } from "assets/icons/TODO_NOT_FINISHED.svg";
import { ReactComponent as IconNotImportant } from "assets/icons/TODO_NOT_IMPORTANT.svg";
import { ReactComponent as IconImportant } from "assets/icons/TODO_IMPORTANT.svg";
import { ITodo } from "types/todo";

import { ActionSheet, Dialog, SwipeAction } from "antd-mobile";
import { Action } from "antd-mobile/es/components/swipe-action";

import InputPopup from "components/InputPopup";
import { getDate } from "libs/times";
import { ActionSheetShowHandler, Action as SheetAction } from "antd-mobile/es/components/action-sheet";

interface Props {
  todo: ITodo;
  deleteOneTodo: (removeTodo: ITodo) => void;
  updateTodoContent: (todo: ITodo) => void;
  toggleTodoFinish: (todo: ITodo) => void;
  toggleTodoImportant: (todo: ITodo) => void;
}

// 纯展示组件
export const TodoItem = ({
  todo,
  deleteOneTodo,
  updateTodoContent,
  toggleTodoFinish,
  toggleTodoImportant,
}: Props) => {
  const [editVisible, setEditVisible] = useState(false);
  const [editContent, setEditContent] = useState("");

  const getTodoTime = () => {
    if (todo.finishedSign !== undefined && todo.createdAt !== undefined) {
      return todo.finishedSign
        ? getDate(todo.finishedAt.toString()) + "完成"
        : getDate(todo.createdAt.toString()) + "创建";
    }
    return "";
  };

  // 滑动组件的actions
  const leftActions: Action[] = [
    {
      key: "pin",
      text: "置顶",
      color: "primary",
    },
  ];
  const rightActions: Action[] = [
    {
      key: "delete",
      text: "删除",
      color: "danger",
      onClick: async () => {
        const res = await Dialog.confirm({
          content: "确定要删除吗？",
        });
        if (res) {
          deleteOneTodo(todo);
        }
      },
    },
  ];

  const updateTodo = (content: string) => {
    todo.content = content;
    updateTodoContent(todo);
  };

  const finishTodo = (event: React.MouseEvent) => {
    event.stopPropagation();
    todo.finishedSign = !todo.finishedSign;
    toggleTodoFinish(todo);
  };

  const importantTodo = (event: React.MouseEvent) => {
    event.stopPropagation();
    todo.importantSign = !todo.importantSign;
    toggleTodoImportant(todo);
  };

  const bottomTaskRef = useRef<ActionSheetShowHandler>();
  const actions: SheetAction[] = [
    {
      text: "操作列表",
      key: "title",
      disabled: true,
    },
    {
      text: todo.finishedSign ? "标记为未完成" : "标记为已完成",
      key: "finished",
      onClick: () => {
        todo.finishedSign = !todo.finishedSign;
        toggleTodoFinish(todo);
        bottomTaskRef.current?.close();
      },
    },
    {
      text: todo.importantSign ? "取消标记重要" : "标记为重要",
      key: "important",
      onClick: () => {
        todo.importantSign = !todo.importantSign;
        toggleTodoImportant(todo);
        bottomTaskRef.current?.close();
      },
    },
    {
      text: "编辑内容",
      key: "edit",
      onClick: async () => {
        bottomTaskRef.current?.close();
        setEditContent(todo.content);
        setEditVisible(true);
      },
    },
    {
      text: "删除任务",
      key: "delete",
      danger: true,
      onClick: async () => {
        const result = await Dialog.confirm({
          content: "确认删除吗?",
        });
        if (result) {
          deleteOneTodo(todo);
        }
        bottomTaskRef.current?.close();
      },
      description: "删除后数据不可恢复",
    },
    {
      text: "取消",
      key: "cancel",
      onClick: () => {
        bottomTaskRef.current?.close();
      },
    },
  ];

  // 通过指令式的方式打开底部的动作面板(任务选项)
  const clickTodo = () => {
    console.log("TodoItem组件-clickTodo入参: ", todo);
    bottomTaskRef.current = ActionSheet.show({
      actions,
      onClose: () => {},
    });
  };

  return (
    <SwipeAction
      key={todo.id}
      leftActions={leftActions}
      rightActions={rightActions}
    >
      <div className={styles.item} onClick={clickTodo}>
        <span
          className={`${styles.icon} ${todo.finishedSign ? styles.active : ""}`}
          onClick={(event) => finishTodo(event)}
        >
          {todo.finishedSign ? <IconFinished /> : <IconNotFinished />}
        </span>
        <span
          className={`${styles.content} ${
            todo.finishedSign ? styles.finished : ""
          }`}
        >
          {todo.content}
        </span>
        <span className={styles.time}>{getTodoTime()}</span>
        <span
          className={`${styles.icon} ${
            todo.importantSign ? styles.active : ""
          }`}
          onClick={(event) => importantTodo(event)}
        >
          {todo.importantSign ? <IconImportant /> : <IconNotImportant />}
        </span>

        <InputPopup
          title="编辑任务内容"
          visible={editVisible}
          setVisible={setEditVisible}
          content={editContent}
          setContent={setEditContent}
          submitHandle={updateTodo}
        ></InputPopup>
      </div>
    </SwipeAction>
  );
};
